<template>
  <div>
    <Modal v-model="modalValue" width="1000" :title="title" :mask-closable="false" @on-cancel="onCancel">
      <Row class="modal-box">
        <Col span="8">
          <h3>组织架构</h3>
          <Tree
            :data="treeData"
            :render="renderContent"
            children-key="childrenCompanyList"
            @on-select-change="onSelectTree"
          ></Tree>
        </Col>
        <Col span="16">
          <Table ref="selection" :columns="columns" :data="listData" height="500px" @on-selection-change="onSelectionChange">
            <template
              slot-scope="{ row }"
              slot="processRoleList"
            >{{ row.processRoleList.map(it => it.permissionRoleName).join(',') }}</template>
          </Table>
        </Col>
      </Row>
      <Row slot="footer" justify="center">
        <Button type="primary" @click="onConfirm">确认</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { getOrgTree, getOrgAllUserPage } from '@/api/organizationManage.js'
import { cloneDeep } from 'lodash';

export default {
  name: 'staffSelect',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '部门负责人设置'
    },
  },
  watch: {
    value: {
      handler (val) {
        this.modalValue = val
        this.$refs.selection.selectAll(false);
      }
    }
  },
  data () {
    return {
      modalValue: false,
      treeData: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名称',
          key: 'realName',
        },
        {
          title: '手机号码',
          key: 'mobile',
          width: 130
        },
        {
          title: '用户角色',
          slot: 'processRoleList',
        },
      ],
      listData: [],
      selectList: []
    }
  },
  async created () {
    const res = await getOrgTree({ companyId: 'g', isShowCompanyDepartment: false, isIncludeOneself: true, isInclusionChildren: true })
    this.treeDataCopy = this.getTreeData(res)
    this.treeData = cloneDeep(this.treeDataCopy)
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('span', data.companyName)
    },
    // table勾选事件
    onSelectionChange (selection) {
      this.selectList = selection
    },
    onCancel () {
      this.$emit('input', false)
    },
    async onSelectTree (arr, item) {
      const request = {
        companyId: item.companyId,
        page: 1,
        size: 9999
      }
      const { data } = await getOrgAllUserPage(request)
      this.listData = data
    },
    onConfirm () {
      if (!this.selectList.length) {
        this.$Message.error('至少选择一个用户!');
        return
      }
      if (this.selectList.length > 1) {
        this.$Message.error('最多只能选择一个用户!');
        return
      }
      this.$emit('setStaff', this.selectList[0])
      this.onCancel()
    },
    // 递归添加展开
    getTreeData (arr) {
      return arr.map(it => {
        if (it.childrenCompanyList && it.childrenCompanyList.length) {
          it.childrenCompanyList = this.getTreeData(it.childrenCompanyList)
        }
        it.expand = true
        return it
      })
    }
  }
};
</script>

<style lang="less" scoped>
</style>
